<!DOCYTPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试</title>
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <!-- <button-counter @increment="incrementTotal"></button-counter>
    <p>Total clicks: {{ total }}</p> -->
    <ul>
        <li v-for="item in items">{{ item.message }}</li>
    </ul>
</div>
    <script>
    const app = createApp({
        data() {
        return {
            total: 0,
            items: [
                    { message: 'Foo' },
                    { message: 'Bar' },
                    { message: 'Baz' }
                    ]
        }
        },
        methods: {
        incrementTotal() {
            this.total++;
        }
        }
    });
    
    app.component('button-counter', {
        template: '<button @click="increment">You clicked me {{ count }} times.</button>',
        data() {
        return {
            count: 0
        };
        },
        methods: {
        increment() {
            this.count++;
            this.$emit('increment');
        }
        }
    });
    
    app.mount('#app');
    </script>
</body>
</html>
